<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
      .el-dialog__header {
        padding: 0;
      }
      /deep/.el-upload--picture-card {
        width: 40px;
        height: 40px;
      }
      body>div>div>div>input{
        width: 370px;
        height: 40px;
        border-radius: 2px;
        margin-top: 23px;
        margin-left: 50px;
        padding-left: 20px;
        font-size: 15px;
        border: 1px solid #666666;
      }
      body>div>div>div>i{
        margin-top: 10px;
        margin-left: 10px;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <div id="app">
          <div style="width: 100%;height: 100%">

            <div style="width: 100%;height: 200px;border: 2px solid #d3dce6;overflow:hidden">
              <i class="el-icon-search">筛选搜索</i><br>
              <el-form
                      :model="ps"
                      style="position: relative;margin-left: 100px;margin-top: 30px"
              >
                  <el-input placeholder="商品名称" style="width: 250px" v-model="ps.title"></el-input>
                  <el-select v-model="ps.categoryId">
                    <el-option v-for="c in categoryArr" :label="c.name" :value="c.id"></el-option>
                  </el-select>
                  <el-select v-model="ps.brandId">
                    <el-option v-for="b in brandArr" :label="b.name" :value="b.id"></el-option>
                  </el-select>
              </el-form>

              <div style="position: relative;right: 10px">
                <el-button style="float: right;position: relative;top: -15px;" type="success" @click="selectSomeProducts()">查询</el-button>
                <el-button style="float: right;position: relative;top: -15px;right:40px">刷新</el-button><br>
              </div>

            </div>

            <div style="border: 2px solid #d3dce6;
                    top: 10px;
                    overflow:hidden;
                    position: relative;
                    height: 60px;
                    line-height: 60px" >
              <i class="el-icon-document">数据列表</i>
              <el-button style="float: right;top: 10px;position: relative" type="success"
                         class="filter-item"
                         style="margin-left: 10px;"
                         type="primary"
                         icon="el-icon-edit"
                         @click="handleInsertProduct"
              >添加商品</el-button>
            </div>
            <div style="border: 2px solid #d3dce6;top: 10px;margin-top: 10px">
              <el-table
                      @selection-change="handleSelectionChange"
                      :data="showProductArr"
                      style="width: 100%">
                <template>
                  <div style="width: 200px;height: 200px;background-color: #3f3f3f">
                  </div>
                </template>
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column type="index" :index="indexMethod" label="编号" width="80"></el-table-column>
                <el-table-column prop="title" label="商品标题" width="80"></el-table-column>
                <el-table-column
                        label="商品图片"
                        width="100">
                  <template slot-scope="scope">
                    <!--scope.row代表当前行对应数组中的对象-->
                    <img :src="scope.row.url" width="100%">
                  </template>
                </el-table-column>
                <el-table-column prop="bname" label="商品品牌" width="80"></el-table-column>
                <el-table-column prop="price" label="价格" width="80"></el-table-column>
                <el-table-column prop="oldPrice" label="原价" width="80"></el-table-column>
                <el-table-column prop="cname" label="商品分类" width="80"></el-table-column>
                <el-table-column prop="saleCount" label="销量" width="80"></el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button size="mini"
                               type="success" @click="productUpdate(scope.row)">修改
                    </el-button>
                    </el-popconfirm><br>
                    <popconfirm>
                      <el-button size="mini"
                              style="margin-top: 2px"
                              slot="reference"
                                 type="primary" @click="productUpdateCtt(scope.row)">添加缩略图</el-button>
                    </popconfirm>

                    <el-popconfirm
                            title="您确定删除此商品吗?"
                            @confirm="productDelete(scope.$index, scope.row)"
                    >
                      <el-button slot="reference"  size="mini"
                                 type="danger">删除</el-button>
                    </el-popconfirm>
                  </template>
                </el-table-column>
              </el-table>

              <!--分页-->
              <el-pagination
                      style="float: right"
                      layout="total, sizes, prev, pager, next, jumper"
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange"
                      :current-page="pageIndex"
                      :page-size="pageSize"
                      :page-sizes="[3,5,8,]"
                      :total="total"
              >
              </el-pagination>
              <el-button
                      style="float: left"
                      @click="deleteAllSelection()"
                      icon="el-icon-delete"
                      type="danger"
                      size="mini">批量删除</el-button>
            </div>
            <!--添加商品-->
            <template>
                <el-dialog
                        :visible.sync="isShowInsertProduct">
                  <el-form
                          :model="p"
                          ref="dataForm"
                          label-position="left"
                          label-width="90px"
                          style="width: 500px;height: 700px; margin-left:15px;margin-top: 5px"
                  >
                    <el-form-item label="商品标题">
                      <el-input type="text" v-model="p.title"></el-input>
                    </el-form-item>
                    <el-form-item label="商品价格">
                      <el-input type="text" v-model="p.price"></el-input>
                    </el-form-item>
                    <el-form-item label="商品原件">
                      <el-input type="text" v-model="p.oldPrice"></el-input>
                    </el-form-item>
                    <el-form-item label="商品库存">
                      <el-input type="text" v-model="p.storage"></el-input>
                    </el-form-item>
                    <el-form-item label="商品图片">
                      <el-upload
                              action="/upload"
                              name="pic"
                              limit="4"
                              list-type="picture-card"
                              :on-success="handleSuccess"
                              :on-preview="handlePictureCardPreview"
                              :on-remove="handleRemove">
                        <i class="el-icon-picture-outline"></i>
                      </el-upload>
                      <el-dialog :visible.sync="dialogVisible">

                      </el-dialog>
                    </el-form-item>
                    <el-form-item label="商品分类">
                      <el-select v-model="p.categoryId">
                        <el-option v-for="c in categoryArr" :label="c.name" :value="c.id"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="商品品牌">
                      <el-select v-model="p.brandId">
                        <el-option v-for="b in brandArr" :label="b.name" :value="b.id"></el-option>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="商品详情">
                      <el-upload
                              action="/upload"
                              name="pic"
                              limit="1"
                              list-type="picture-card"
                              :on-success="handleSuccess2"
                              :on-preview="handlePictureCardPreview"
                              :on-remove="handleRemove">
                        <i class="el-icon-plus"></i>
                      </el-upload>
                      <el-dialog :visible.sync="dialogVisible">

                      </el-dialog>
                    </el-form-item>
                  </el-form>
                  <div slot="footer" class="dialog-footer">
                    <el-button type="success" @click="insert()">添加商品</el-button>
                  </div>
                </el-dialog>
            </template>
          </div>

    </div>
  </body>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
  <!-- import Vue before Element -->
  <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
  <!-- import JavaScript -->
  <script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
  <script>
    let v = new Vue({
      el: '#app',
      data: function() {
        return {
          isShowInsertProduct:false,
          dialogImageUrl: '',
          dialogVisible: false,
          currentIndex:"1-1",
          categoryArr:[],
          bannerArr:[],
          showProductArr:[],
          productArr:[],
          orderArr:[],
          user:{},
          p:{
            title:"",
            url:"",
            storage:"",
            price:"",
            oldPrice:"",
            content:"",
            categoryId:"",
            brandId:"",
          },
          ps:{
            title:"",
            categoryId:"",
            brandId:"",
          },
          brandArr:[],
          pageIndex: 1, // 第几页
          pageSize: 5, // 每页几条数据
          total: 0, // 总条目数
        }
      },
      methods:{
        productUpdateCtt(product){
          location.href="/updateProduct.html?id="+product.id;
        },
        handleSelect(key,keyPath){
          if (key=='1-2'){
            let name = prompt("请输入分类的名称");
            //点击取消
            if (name==null){
              return;
            }
            if (name==''){
              v.$message.error("分类名称不能为空");
              return;
            }
            //发出添加分类的请求
            axios.get("/category/insert?name="+name).then(function (response) {
              //添加分类后把所有的分类请求回来赋值给数组
              v.categoryArr = response.data;
            })
          }else if (key=='2-2'){
            //跳转到添加轮播图页面
            location.href="/insertBanner.html";
          }else{
            v.currentIndex = key;
          }
        },
        /****************商品批量操作********************/
        //勾选表格多选框
        handleSelectionChange(val) {
          this.multipleSelection = val  //当前选中行的数据
        },
        deleteAllSelection() {
          if (this.multipleSelection.length > 0) {
            this.$confirm('此操作将删除选中项,是否继续', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              const idList = []
              for (const v of this.multipleSelection) {
                idList.push(v.id)
              }
              this.deleteSelectAllProducts(idList)
            }).catch(() => {
            })
          } else {
            this.$notify({
              title: '提示',
              message: '请勾选要提交的项！',
              type: 'warning',
              duration: 2000
            })
          }
        },
        //批量删除商品
        deleteSelectAllProducts(idList) {
          axios.post("/product/deleteSelectAllProducts",idList).then(function (response) {
            v.productArr = response.data;
            v.total = v.productArr.length;
            v.showProductArr = v.productArr.slice((v.pageIndex - 1) * v.pageSize, v.pageIndex * v.pageSize);
          })
        },
        selectSomeProducts(){
          axios.post("/product/selectSomeProducts",v.ps).then(function (response) {
            v.productArr = response.data;
            v.total = v.productArr.length;
            v.showProductArr = v.productArr.slice((v.pageIndex - 1) * v.pageSize, v.pageIndex * v.pageSize);
          })
        },
        /****************商品增删查、分页***********************/
        getShowProductArr() {
          //获取截取开始索引
          let begin = (v.pageIndex - 1) * v.pageSize;
          //获取截取结束索引
          let end = v.pageIndex * v.pageSize;
          //通过索引去截取，从而展示
          v.showProductArr = v.productArr.slice(begin, end);
        },
        //页数改变，重新截取
        handleCurrentChange(val) {
          v.pageIndex = val;
          this.getShowProductArr();
        },
        //条目数改变，也重新截取
        handleSizeChange(val) {
          v.pageIndex = 1;
          v.pageSize = val;
          this.getShowProductArr();
        },
        indexMethod(index){
          return index+(v.pageIndex-1)*v.pageSize+1;
        },
        productDelete(index,product){
          axios.get("/product/delete?id="+product.id).then(function (response) {
            v.productArr.splice(index,1);
            v.isShowInsertProduct = false;
            v.productArr = response.data;
            v.total = v.productArr.length;
            v.showProductArr = v.productArr.slice((v.pageIndex - 1) * v.pageSize, v.pageIndex * v.pageSize);
          })
        },
        productUpdate(product){
          location.href="/updateProduct.html?id="+product.id;
        },
        insert(){
          //发出添加商品的请求
          axios.post("/product/insert",v.p).then(function (response) {
            v.isShowInsertProduct = false;
            v.productArr = response.data;
            v.total = v.productArr.length;
            v.showProductArr = v.productArr.slice((v.pageIndex - 1) * v.pageSize, v.pageIndex * v.pageSize);
          })
        },
        handleInsertProduct() {
          this.p = {
            title:"",
            url:"",
            storage:"",
            price:"",
            oldPrice:"",
            content:"",
            categoryId:"",
            brandId:"",
          },
                  this.isShowInsertProduct=true;
        },
        handleSuccess(response,file,fileList){
          v.p.url = response;
        },
        handleSuccess2(response,file,fileList){
          v.p.content = response;
        },
        handleRemove(file, fileList) {
          console.log(file, fileList);
          axios.get("/remove?url=" + v.p.url).then(function () {
            v.p.url = "";
          });
          axios.get("/remove?url="+v.p.content).then(function () {
            v.p.content="";
          })
        },
        handlePictureCardPreview(file) {
          this.dialogImageUrl = file.url;
          this.dialogVisible = true;
        }
      },
      created:function () {
        //发请求获取分类信息
        axios.get("/category/select").then(function (response) {
          v.categoryArr = response.data;
        });
        //发请求获取品牌信息
        axios.get("/brand/select").then(function (response) {
          v.brandArr = response.data;
        });
        //发请求获取所有商品数据
        axios.get("/product/select/admin").then(function (response) {
          v.productArr = response.data;
          v.total = v.productArr.length;
          v.showProductArr = v.productArr.slice((v.pageIndex - 1) * v.pageSize, v.pageIndex * v.pageSize);
        });
      }
    })
  </script>
</html>